<template>
  <div class="nr" ref="container">
    <div
      v-for="item in items"
      :key="item.id"
      class="nr_item"
      @mouseenter="change1(item.id)"
      @mouseleave="change2(item.id)"
      @click="tan(item.id)"
    >
      <img :src="item.img" alt="" />
      <!-- <p :style="{ color: item.flag ? 'red' : '' }">{{ item.text }}</p> -->
      <p :class="item.flag ? 'on' : ''">{{ item.text }}</p>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'

const items = ref([
  {
    id: 1,
    img: '/src/assets/images/api3.png',
    text: '实训管理平台',
    flag: false
  },
  {
    id: 2,
    img: '/src/assets/images/api1.png',
    text: 'API系统',
    flag: false
  },
  {
    id: 3,
    img: '/src/assets/images/八维实训平台.png',
    text: '八维实训平台',
    flag: false
  },
  {
    id: 4,
    img: '/src/assets/images/后台管理.png',
    text: '后台管理系统',
    flag: false
  },
  {
    id: 5,
    img: '/src/assets/images/yuyin.png',
    text: '语音训练系统',
    flag: false
  },
  {
    id: 6,
    img: '/src/assets/images/api2.png',
    text: '阅卷平台',
    flag: false
  }
])

const container = ref()

onMounted(() => {
  for (let i = 0; i < container.value.children.length; i++) {
    container.value.children[i].style['animation-delay'] = `${-5 - i * 3.3}s,${-i * 3.3}s,${
      -i * 3.3
    }s`
  }
})

const change1 = (id: number) => {
  let obj = items.value.find((item) => item.id == id)
  obj.flag = !obj.flag
  // console.log(obj.flag)

  for (let i = 0; i < container.value.children.length; i++) {
    container.value.children[i].style['animation-play-state'] = 'paused'
  }
}

const change2 = (id: number) => {
  let obj = items.value.find((item) => item.id == id)
  obj.flag = !obj.flag
  // console.log(obj.flag)
  for (let i = 0; i < container.value.children.length; i++) {
    container.value.children[i].style['animation-play-state'] = 'running'
  }
}

const tan = (id: number) => {
  let obj = items.value.find((item) => item.id == id)
  alert(obj.text)
}
</script>


<style scoped lang='scss'>
@keyframes yunx {
  0% {
    left: -90px;
  }
  100% {
    left: calc(100% - 90px);
  }
}
@keyframes yuny {
  0% {
    top: -50px;
  }
  100% {
    top: 100%;
  }
}
@keyframes xuan {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.5);
  }
}
.nr {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
}
.nr_item {
  position: absolute;
  left: 0;
  top: 0;
  animation-name: yunx, yuny, xuan;
  animation-iteration-count: infinite;
  animation-duration: 10s, 10s, 20s;
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  animation-direction: alternate;
  img {
    width: 180px;
    height: 180px;
  }
  p {
    text-align: center;
  }
}
.on {
  color: red !important;
}
</style>
